<template>
  <div v-loading="allLoading" class="acttask">
    <div class="row">
      <div class="col col-left">
        <div class="tabTask">
          <span :class="{active:cur===0}" @click="active(0)">{{ $t('流程申请单') }}</span>
          <span v-for="(item, index) in taskData.businessPathArray" :key="index" :class="{active:cur===2}" @click="importBusinessPath(2,item)">
            {{ $t(item.name) }}
          </span>
          <span v-if="taskData.actApprovalPng === 'true'" :class="[{active: cur === 1}]" @click="active(1)">{{ $t('流程图') }}</span>
          <span class="last" />
        </div>
        <div v-show="cur === 0" class="actTaskLeft actTaskForm" :class="formDisabled ? 'act-form-disabled' : ''">
          <div>
            <!--动态组件 ，根据is的值来确定渲染哪个组件 -->
            <component :is="actFormPath" ref="actFormPath" />
          </div>
          <!--流转记录-->
          <div v-if="taskData.actApprovalRecord === 'true'">
            <approval-record v-if="showRecord" :record-list.sync="recordList" :act-id="taskData.actId" />
          </div>
        </div>
        <div v-if="cur === 1" class="actTaskLeft">
          <!--流程图-->
          <act-flow-chart v-if="showRecord" :act-id="taskData.actId" />
          <!-- <act-model-view v-if="showRecord" :act-id="taskData.actId" />-->
        </div>

        <div v-show="cur === 2" class="actTaskLeft">
          <div style="margin: 0px -20px 20px 0;">
            <!--动态组件 ，根据is的值来确定渲染哪个组件 -->
            <component :is="businessPath" ref="businessPath" />
          </div>
        </div>

        <div id="print" ref="print" class="actTaskLeft" style="display:none;">
          <div>
            <component :is="printPath" ref="printPath" />
          </div>
          <div v-if="taskData.actApprovalRecord === 'true'">
            <approval-record v-if="showRecord" :list="recordList" />
          </div>
        </div>
      </div>
      <div class="col col-right">
        <div class="accraditation">
          <div class="area-header">
            <el-tooltip class="item" effect="dark" :content="taskData.title" placement="bottom">
              <span class="area-header-title area-header-act">{{ taskData.title }}</span>
            </el-tooltip>
          </div>
          <el-form
            v-if="taskData.assignee !== undefined && taskData.assignee !== '' && taskData.assignee !== null"
            ref="form"
            :rules="rules"
            label-width="100px"
            :model="taskData"
            class="dataForm padr15"
          >
            <el-row>
              <el-col v-if="taskData.actTaskDocumentation" :span="24">
                <div class="tip-block">
                  <i class="el-icon-warning-outline" />{{ $t(taskData.actTaskDocumentation) }}
                </div>
              </el-col>
              <div v-for="(filed,index) in taskData.formFieldList" :key="index">
                <el-col v-if="filed.type === 'enum'" :span="24">
                  <el-form-item :label="$t(filed.name)" :prop="'formFieldList.' + index + '.value'">
                    <el-select v-model="filed.value" :disabled="formFieldDisabled" :placeholder="$t('请选择')" @change="formFileSelectChange(filed.value)">
                      <el-option
                        v-for="option in filed.option"
                        :key="option.key"
                        :label="$t(option.value)"
                        :value="option.key"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-if="filed.type === 'string'" :span="24">
                  <el-form-item :label="$t(filed.name)" :prop="'formFieldList.' + index + '.value'">
                    <el-input
                      v-model="filed.value"
                      :disabled="formFieldDisabled"
                      placeholder=" "
                      type="textarea"
                      maxlength="2000"
                      show-word-limit
                    />
                  </el-form-item>
                </el-col>
                <el-col v-if="filed.type === 'string' && filed.quickAdvice !== 'N'" :span="24">
                  <el-form-item :label="$t('快捷意见')">
                    <span slot="label">{{ $t('快捷意见') }} <i class="el-icon-edit edit-icon" @click="findFastOpinions" /></span>
                    <div v-for="(item,index) in usedOpinions" :key="index" style="display: inline-block;margin: 0 2px 2px 0;">
                      <el-button size="mini" plain class="maxWid-400" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis" @click="addValue(item,filed)">{{ item.opinions }}</el-button>
                    </div>
                    <!-- <el-button size="mini" icon="el-icon-plus" type="primary" plain @click="findFastOpinions">{{ $t('编辑') }}</el-button> -->
                  </el-form-item>
                </el-col>
                <el-col v-if="filed.type === 'date'" :span="24">
                  <el-form-item :label="$t(filed.name)" :prop="'formFieldList.' + index + '.value'">
                    <el-date-picker
                      v-model="filed.value"
                      :disabled="formFieldDisabled"
                      clearable
                      style="width:200px"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder=""
                    />
                  </el-form-item>
                </el-col>
              </div>
              <!-- 修改意见配置-->
              <el-col v-if="taskData.completeType === 'updateComment'" :span="24">
                <el-form-item :label="$t('请选择需要修改意见的节点')" prop="updateCommentNode">
                  <el-select v-model="taskData.updateCommentNode" :placeholder="$t('请选择')" @change="getUpdateCommentUserList()">
                    <el-option
                      v-for="historyNode in historyNodeList"
                      :key="historyNode.taskId"
                      :label="historyNode.taskName"
                      :value="historyNode.taskId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="taskData.completeType === 'updateComment'" :span="24">
                <el-form-item :label="$t('请选择需要修改意见的用户')" prop="updateCommentTaskId">
                  <el-select v-model="taskData.updateCommentTaskId" clearable multiple :placeholder="$t('请选择')">
                    <el-option
                      v-for="approve in updateCommentData.approveList"
                      :key="approve.id"
                      :label="approve.name"
                      :value="approve.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <!--流程驳回配置-->
              <div v-if="rejectedStopMessage !==''" style="color: #F56C6C">
                提示信息：{{ rejectedStopMessage }}
              </div>
              <el-col v-if="taskData.completeType === 'rejected' && rejectedStopMessage === ''" :span="24">
                <el-form-item :label="$t('驳回至')" prop="rejectedNode">
                  <el-select v-model="taskData.rejectedNode" clearable :placeholder="$t('请选择')">
                    <el-option
                      v-for="historyNode in historyNodeList"
                      :key="historyNode.taskId"
                      :label="historyNode.taskName"
                      :value="historyNode.taskId"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item :label="$t('驳回后提交方式')" prop="rejectedCompleteType">
                  <dict-select v-model="taskData.rejectedCompleteType" dictionary="rejected_submit_method" />
                </el-form-item>
              </el-col>
              <el-col v-show="canSign" :span="24">
                <el-form-item :label="$t('操作')">
                  <el-button size="mini" type="primary" plain :class="{'on':taskData.completeType === 'addBefore'}" @click="completeTypeClick('addBefore')">{{ $t('开始前加签') }}</el-button>
                  <el-button v-show="taskData.processDefKey !== 'act_free_flow_approval'" size="mini" type="primary" plain :class="{'on':taskData.completeType === 'addAfter'}" @click="completeTypeClick('addAfter')">{{ $t('开始后加签') }}</el-button>
                  <el-button size="mini" type="primary" plain :class="{'on':taskData.completeType === 'entrust'}" @click="completeTypeClick('entrust')">{{ $t('转签') }}</el-button>
                </el-form-item>
              </el-col>

              <el-col v-if="taskData.completeType === 'addBefore' || taskData.completeType === 'addAfter'" :span="24">
                <el-form-item :label="$t('加签')" prop="addUser">
                  <UserSelect v-model="taskData.addUser" :multiple="true" clearable />
                </el-form-item>
              </el-col>

              <el-col v-if="taskData.completeType === 'entrust'" :span="24">
                <el-form-item :label="$t('转签')" prop="entrustUser">
                  <UserSelect v-model="taskData.entrustUser" clearable />
                </el-form-item>
              </el-col>

              <el-col v-show="taskData.completeType === 'addBefore' || taskData.completeType === 'entrust'" :span="24">
                <el-form-item :label="$t('备注')" prop="addTaskRemark">
                  <el-input
                    v-model="taskData.addTaskRemark"
                    placeholder=" "
                    type="textarea"
                    maxlength="2000"
                    show-word-limit
                  />
                </el-form-item>
              </el-col>

              <el-col v-show="taskData.processDefKey === 'act_free_flow_approval' && (taskData.taskType === 'actTask' || taskData.taskType === 'freeFlow') && nextApply && !isAddTask && taskData.nextApprovalArray && taskData.nextApprovalArray.length === 0" :span="24">
                <el-form-item prop="nextApproval">
                  <span slot="label">
                    {{ $t('下一审批人') }}
                    <el-tooltip placement="top">
                      <div slot="content">
                        <span v-html="$t('1.申请人:提交时必须选择下一审批人<br>2.审批人:提交时如不选择下一审批人提交后流程自动结束')" />
                      </div>
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </span>
                  <UserSelect v-model="taskData.nextApproval" clearable />
                </el-form-item>
              </el-col>
              <el-col v-show="taskData.processDefKey === 'act_free_flow_approval' && nextApply && !isAddTask && taskData.nextApprovalArray && taskData.nextApprovalArray.length !== 0" :span="24">
                <el-form-item>
                  <span slot="label">
                    {{ $t('下一审批人') }}
                    <el-tooltip placement="top">
                      <div slot="content">
                        {{ $t('如有多个审批人,则按顺序审批') }}
                      </div>
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </span>
                  <div class="taskPeo">
                    <span v-for="(approval,index) in taskData.nextApprovalArray" :key="index"> <span v-if="index !== 0"> --> </span>  {{ approval }} </span>
                  </div>
                </el-form-item>
              </el-col>

              <el-col v-if="taskData.selectApproval === 'true' && canSign && taskData.taskType !== 'addBefore'" :span="24">
                <el-form-item :label="$t('下一节点审批人')" prop="nextNodeApproval">
                  <UserSelect v-if="!taskData.nextNodeChoiceScope" v-model="taskData.nextNodeApproval" clearable />
                  <el-select v-if="taskData.nextNodeChoiceScope" v-model="taskData.nextNodeApproval" multiple style="width: 100%">
                    <el-option
                      v-for="user in taskData.nextNodeChoiceScope"
                      :key="user.id"
                      :label="$t(user.nickName)"
                      :value="user.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item :label="$t('抄送')">
                  <UserSelect v-model="taskData.ccUser" :multiple="true" clearable />
                </el-form-item>
              </el-col>

              <el-col v-if="taskData.associatedProcess && taskData.associatedProcess.length && taskData.associatedProcess.length > 0" :span="24">
                <el-form-item :label="$t('关联流程')">
                  <span slot="label">
                    {{ $t('关联流程') }}
                    <el-tooltip placement="top">
                      <div slot="content">
                        {{ $t('点击可查看流程详情') }}
                      </div>
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </span>
                  <el-tag
                    v-for="item in taskData.associatedProcess"
                    :key="item.id"
                    class="mr10 mb5"
                    @click="viewAssociatedProcess(item.id)"
                  >
                    {{ item.title }}
                  </el-tag>
                </el-form-item>
              </el-col>

              <el-col v-if="taskData.uploadfile === 'true'" :span="24">
                <FileTable :list.sync="taskData.fileList" :business-id="taskData.businessId" data-type="act_approval" show-type="small" :btn-show="!otherBtnHide" />
              </el-col>

            </el-row>
          </el-form>
          <div
            v-if="taskData.assignee !== undefined && taskData.assignee !== '' && taskData.assignee !== null"
            class="actFooter"
          >
            <el-button icon="" size="small" @click="$parent.$parent.formOpen = false">{{ $t('返回') }}</el-button>
            <el-button type="warning" size="small" @click="actTaskOpinionStaging">{{ $t("暂存意见") }}</el-button>
            <el-button type="warning" icon=" " size="small" @click="doPrint">{{ $t('打印') }}</el-button>
            <el-button v-if="taskData.actModifyFrom === 'true'" type="primary" icon=" " size="small" @click="saveForm">{{ $t('保存') }}</el-button>
            <el-button type="primary" icon=" " size="small" @click="complete">{{ $t('提交') }}</el-button>
          </div>
          <div v-if="taskData.assignee === undefined || taskData.assignee === '' || taskData.assignee == null">
            <div style="text-align: center;margin-top: 100px">
              <span v-html="$t('同一个任务多个办理人的情况下会出现签收流程按钮<br>')" />
              <span v-html="$t('如您签收流程，流程则由您办理，其他用户待办自动消失<br>')" />
              <el-button type="primary" style="margin-top: 20px" icon=" " size="small" @click="claimTask">{{ $t('签收流程') }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="processInfoFormOpen" :title="$t('流程详情')" :destroy-on-close="true" custom-class="dialogForm" style=" text-align: left;" append-to-body :close-on-click-modal="false" :lock-scroll="false">
      <ProcessInfoForm ref="processInfoForm" />
    </el-dialog>
    <el-dialog :visible.sync="quickCommentsOpen" width="50%" :title="$t('快捷意见')" :destroy-on-close="true" custom-class="dialogForm" append-to-body :close-on-click-modal="false">
      <wf-used-opinion-list ref="wfUsedOpinionList" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getTask,
  complete,
  claimTask,
  getHistoryNode,
  rejectedCheck,
  actTaskOpinionStaging,
  getUpdateCommentUserList
} from '@/api/act/task/actTask'
import { getAsyncComponent } from '@/utils'
import approvalRecord from '@/components/Act/ApprovalRecord'
import ActFlowChart from '@/views/act/process/actFlowChart'
import ActModelView from '@/views/act/model/actModelView'
import Vue from 'vue'
import ProcessInfoForm from '@/views/act/process/processInfoForm'
import WfUsedOpinionList from '@/views/act/task/wfUsedOpinionList'
import { listWfUsedOpinion } from '@/api/act/task/wfUsedOpinion'
import { importComponent } from '@/qiankun/index'
import { appsVariable } from '@/qiankun/registerApp'
export default {
  name: 'ActTaskForm',
  components: {
    WfUsedOpinionList,
    ProcessInfoForm,
    ActFlowChart,
    ActModelView,
    approvalRecord
  },
  data() {
    return {
      otherBtnHide: false,
      formDisabled: false,
      printPath: '',
      windowHeight: document.documentElement.clientHeight - 100 + 'px',
      diyHeight: document.documentElement.clientHeight - 140 + 'px',
      // 是否可以加签
      canSign: true,
      // 不能驳回的提示信息
      rejectedStopMessage: '',
      // 关联流程窗口
      processInfoFormOpen: false,
      // 快捷意见
      quickCommentsOpen: false,
      // list页面传过来的数据
      taskData: {
        /**
         * 待办提交类型
         * task:正常提交
         * addBefore:前加签提交
         * addAfter:后加签提交
         * reading:阅办提交
         * freeFlow:自由流提交
         * entrust:转签
         * rejected:驳回
         */
        completeType: 'task',
        // 抄送用户
        ccUser: [],
        // 加签用户
        addUser: [],
        // 驳回节点
        rejectedNode: undefined,
        // 驳回后提交方式 normal:正常提交   return:直接返回当前节点
        rejectedCompleteType: 'normal',
        // 转签用户
        entrustUser: undefined,
        // 下一步审批人
        nextApproval: [],
        // 审批意见
        formFieldList: [],
        // 附件ID集合
        fileIdList: [],
        // 是否可以选择下一节点审批人
        selectApproval: false,
        // 选择的下一节点审批人集合
        nextNodeApproval: [],
        // 加签备注
        addTaskRemark: undefined,
        // 需要修改意见的任务ID集合
        updateCommentTaskId: []
      },
      // 表单字段是否禁止填写
      formFieldDisabled: false,
      // 返回修改意见数据
      updateCommentData: {},
      // 待办页面组件
      actFormPath: '',
      // 业务表单组件
      businessPath: '',
      // 是否展示自由流的下一审批人选择
      nextApply: true,
      // 当前是否是加签操作
      isAddTask: false,
      // 历史节点集合（驳回时使用）
      historyNodeList: [],
      // 临时保存的审批意见
      formFieldListTemp: undefined,
      form: [],
      cur: 0,
      statusOptions: [],
      // 快捷意见列表
      usedOpinions: [],
      // 快捷意见
      opinions: undefined,
      // 遮罩层
      allLoading: true,
      clicked: false,
      clickClass: '',
      showRecord: true,
      rules: {
        rejectedNode: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ], rejectedCompleteType: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ], addUser: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ], entrustUser: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ], nextNodeApproval: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ], updateCommentTaskId: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ], updateCommentNode: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ]

      },
      isConForm: false,
      recordList: []
    }
  },
  created() {
    this.listWfUsedOpinion()
  },
  mounted: function() {
    window.onresize = () => {
      return (() => {
        this.windowHeight = document.documentElement.clientHeight - 120 + 'px'
        this.diyHeight = document.documentElement.clientHeight - 140 + 'px'
      })()
    }
    this.$nextTick(function() {
      this.windowHeight = document.documentElement.clientHeight - 120 + 'px'
      this.diyHeight = document.documentElement.clientHeight - 140 + 'px'
    })

    // 错误捕获
    const errorHandler = (error) => {
      if (error) {
        if (error.message.indexOf('Cannot find module') > -1) {
          this.printPath = this.actFormPath
        }
      }
    }
    Vue.config.errorHandler = errorHandler
    Vue.prototype.$throw = (error) => errorHandler(error, this)
  },
  methods: {
    doPrint() {
      if (!this.isConForm) {
        this.$print(this.$refs.print)
      } else {
        this.$print('.actTaskForm')
      }
    },
    init(data) {
      this.nextApply = true
      this.allLoading = true
      this.taskData = data
      this.showRecord = false
      this.formFieldDisabled = false

      // 获取当前待办信息
      this.$nextTick(() => {
        getTask(data.id).then(response => {
          this.$nextTick(function() {
            this.taskData = response.data
            console.log(this.taskData)
            var formData = {}
            // 业务表数据ID
            formData.id = this.taskData.dataId
            // 任务节点标识
            formData.actTaskKey = this.taskData.taskKey
            // 待办ID
            formData.actTaskId = this.taskData.taskId
            // 流程实例ID
            formData.actId = this.taskData.actId
            // 流程定义ID
            formData.actProcessDefKey = this.taskData.processDefKey
            // 是否可以修改表单
            formData.actModifyFrom = this.taskData.actModifyFrom
            // 表单组件ID
            formData.formId = this.taskData.actFormId
            var formPath = response.data.actFormPath
            if (formPath === '@/views/system/desform/release/onlineForm') {
              this.isConForm = true
            } else {
              this.isConForm = false
            }
            // 打印区域
            if (response.data.actViewPath !== undefined && response.data.actViewPath !== '') {
              this.printPath = getAsyncComponent(response.data.actViewPath)
              // formPath = response.data.actViewPath
            } else {
              this.printPath = getAsyncComponent(response.data.actFormPath)
              // formPath = response.data.actFormPath
            }

            this.importActFormPath(formPath, formData)
            this.allLoading = false
            this.showRecord = true
            // 获取默认提交类型
            this.getDefaultCompleteType()
            // 控制下一审批人是否必填
            this.actFreeFlowApprovalRules()
            // 表单属性必填
            this.formFieldRequire()
          })
        })
      })
    },
    // 表单属性必填校验
    formFieldRequire() {
      for (var i = 0; i < this.taskData.formFieldList.length; i++) {
        var formField = this.taskData.formFieldList[i]
        if (formField.require && !this.formFieldDisabled) {
          this.rules['formFieldList.' + i + '.value' ] = { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        } else {
          this.rules['formFieldList.' + i + '.value' ] = null
        }
      }
    },
    // 自由流申请人审批时，下一审批人必填
    actFreeFlowApprovalRules() {
      if (this.taskData.processDefKey === 'act_free_flow_approval' && this.taskData.taskKey === 'applyUser') {
        this.rules.nextApproval = [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ]
      }
    },
    // 切换sheet页
    active(v) {
      this.cur = v
    },
    // 引入业务组件
    importBusinessPath(v, importBusinessData) {
      this.cur = v
      this.businessPath = getAsyncComponent(importBusinessData.path)
      this.$bus.$once('async_done', () => {
        console.log('执行一次')
        this.$nextTick(() => {
          this.$refs.businessPath && this.$refs.businessPath.init(importBusinessData.initData)

          // 控制按钮是否隐藏
          if (this.$refs.businessPath?._data !== undefined) {
            this.$refs.businessPath._data.btnHide = true
          }
          // 隐藏保存按钮外的其它按钮
          this.formDisabled = false
          if (this.taskData.actModifyFrom === 'false' && this.$refs.businessPath?._data !== undefined) {
            this.$refs.businessPath._data.otherBtnHide = true
            this.formDisabled = true
          }
        })
      })
    },
    // 引入流程申请单组件
    async importActFormPath(actFormPath, data) {
      // 循环所有子应用，如果是子应用的菜单，则引用他们的组件
      const apps = appsVariable()
      const newPath = actFormPath.lastIndexOf('\/')
      var strPath = ''
      var subAppName
      var isSubAppMenuPath = false
      var subApp
      if (apps) {
        apps.forEach(element => {
          if (actFormPath && actFormPath.includes(element.name)) {
            isSubAppMenuPath = true
            subAppName = element.name
            subApp = element
            return
          }
        })
      }
      if (isSubAppMenuPath) {
        strPath = actFormPath.substring(newPath + 1, actFormPath.length)
        const componentName = strPath + '_' + subAppName
        // 导入子应用的组件
        await importComponent(subApp, componentName)
        this.actFormPath = componentName
      } else {
        this.actFormPath = getAsyncComponent(actFormPath)
      }
      this.actFormData = data
      this.loadComponent()
    },
    // 加载组件
    loadComponent() {
      this.$bus.$once('async_done', () => {
        console.log('执行一次')
        this.$nextTick(() => {
          this.$refs.actFormPath && this.$refs.actFormPath.init(this.actFormData)
          if (!this.isConForm) {
            this.$refs.printPath && this.$refs.printPath.init(this.actFormData)
          }

          // 控制按钮是否隐藏
          if (this.$refs.actFormPath?._data !== undefined) {
            this.$refs.actFormPath._data.btnHide = true
          }
          // 隐藏保存按钮外的其它按钮
          this.formDisabled = false
          if (this.taskData.actModifyFrom === 'false' && this.$refs.actFormPath?._data !== undefined) {
            this.$refs.actFormPath._data.otherBtnHide = true
            this.formDisabled = true
          }

          var _this = this
          _this.$nextTick(() => {
            var timer = null // 声明定时器
            function check() { // 检查是否执行完成
              // if ((_this.$refs.actFormPath && _this.$refs.actFormPath.form.id) || (_this.$refs.actFormPath && _this.$refs.actFormPath.pojo.id && _this.$refs.actFormPath.loading === false) || (_this.$refs.actFormPath && _this.$refs.actFormPath.$refs.menuPath && _this.$refs.actFormPath.$refs.menuPath.form.id)) {
              if (_this.$refs.actFormPath &&
                (_this.$refs.actFormPath.form && _this.$refs.actFormPath.form.id && _this.$refs.actFormPath.loading === false) ||
                (_this.$refs.actFormPath.pojo && _this.$refs.actFormPath.pojo.id && _this.$refs.actFormPath.loading === false) ||
                (_this.$refs.actFormPath.$refs.menuPath && _this.$refs.actFormPath.$refs.menuPath.form.id)) {
                checkInput()
                if (!timer) clearTimeout(timer) //  清除定时器
              } else timer = setTimeout(check, 0) //  自我调用
            }
            check()

            function checkInput() {
              var textareas = document.querySelectorAll('.act-form-disabled textarea')
              for (var z = 0; z < textareas.length; z++) {
                if (textareas[z].value) {
                  textareas[z].outerHTML = '<div class="disabledTextarea">' + textareas[z].value.replaceAll('\r', '<br>').replaceAll('\n', '<br>') + '</div>'
                }
              }

              var inputs = document.querySelectorAll('.act-form-disabled .el-input__inner')
              for (var j = 0; j < inputs.length; j++) {
                if (inputs[j].parentNode.parentNode.className.indexOf('el-select') !== -1) { // select
                  // console.log(inputs[j])
                } else {
                  if (inputs[j].scrollWidth > inputs[j].offsetWidth) {
                    inputs[j].outerHTML = '<div class="disabledTextarea">' + inputs[j].value + '</div>'
                  }
                }
              }

              var quills = document.querySelectorAll('.act-form-disabled .quill-editor .ql-editor')
              for (var i = 0; i < quills.length; i++) {
                quills[i].setAttribute('contenteditable', false)
              }
            }
          })
        })
      })
    },
    // 获取默认提交类型 task:正常提交   freeFlow:自由流提交
    getDefaultCompleteType() {
      if (this.taskData.processDefKey === 'act_free_flow_approval') {
        this.taskData.completeType = 'freeFlow'
      } else if (this.taskData.processDefKey === 'act_self_built_process') {
        this.taskData.completeType = 'selfBuilt'
      } else {
        this.taskData.completeType = 'task'
      }
    },
    // 修改提交类型
    completeTypeClick(completeType) {
      if (this.taskData.completeType === completeType) {
        this.getDefaultCompleteType()
        this.isAddTask = false
      } else {
        this.taskData.completeType = completeType
        this.isAddTask = true
      }

      // 前加签和转签不输入表单字段
      if (this.taskData.completeType === 'addBefore' || this.taskData.completeType === 'entrust') {
          this.formFieldDisabled = true
          var againCache = false
          for (let i = 0; i < this.taskData.formFieldList.length; i++) {
            if (this.formFieldListTemp === undefined) {
             againCache = true
              this.formFieldListTemp = {}
            }
            if (againCache) {
              this.formFieldListTemp[this.taskData.formFieldList[i].id] = this.taskData.formFieldList[i].value
            }
            this.taskData.formFieldList[i].value = undefined
          }
      } else {
         this.formFieldDisabled = false
         if (this.formFieldListTemp !== undefined) {
           for (let i = 0; i < this.taskData.formFieldList.length; i++) {
             this.taskData.formFieldList[i].value = this.formFieldListTemp[this.taskData.formFieldList[i].id]
           }
           this.formFieldListTemp = undefined
         }
      }
      // 必填字段设置
      this.formFieldRequire()
    },
    // 提交流程
    complete: function() {
      this.$refs['form'].validate(valid => {
        // 验证数据
        if (valid) {
          // 需要修改表单
          if (this.taskData.actModifyFrom === 'true') {
            // 保存表单并提交流程
            this.submitFormAndCompleteProcess()
          } else {
            // 提交流程
            this.completeProcess()
          }
        }
      })
    },
    // 保存表单
    saveForm: function() {
      this.$refs.actFormPath.submitForm('actSave').then(() => {
        // this.msgSuccess(this.$t('保存成功'))
      }).catch(() => {
        console.log('error')
        this.msgError(this.$t('保存表单失败,请检查是否有必填信息未填写'))
      })
    },
    // 提交流程
    completeProcess() {
      this.$confirm(this.$t('是否确认提交流程'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        this.allLoading = true
        complete(this.taskData).then(response => {
          if (response.code === 200) {
            this.allLoading = false
            if (response.data.length > 0) {
              var taskName = '['
              for (let i = 0; i < response.data.length; i++) {
                if (taskName === '[') {
                  taskName = taskName + response.data[i].taskName
                } else {
                  taskName = taskName + ',' + response.data[i].taskName
                }
              }
              taskName = taskName + ']'
              this.$alert(this.$t('后续节点' + taskName + '未找到审批人,请联系管理员进行疏导'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                type: 'warning'
              })
            }
            this.closeForm()
            this.$bus.$emit('Refresh') // 刷新待办数量
          } else {
            this.msgError(response.msg)
            this.allLoading = false
          }
        }).catch(() => {
          this.allLoading = false
        })
      }).catch(() => {
        this.allLoading = false
      })
    },
    // 关闭form页面
    closeForm() {
      console.log(this.$parent)

      this.$parent.$parent.formOpen = false
      this.$parent.$parent.getList()
    },
    // 保存表单并提交流程
    submitFormAndCompleteProcess() {
      this.$refs.actFormPath.submitForm('actSave').then(() => {
        if (!this.allLoading) { // 防止重复提交
          this.completeProcess()
        }
      }).catch(() => {
        console.log('error')
        this.msgError(this.$t('保存表单失败'))
      })
    },
    // 签收流程
    claimTask() {
      this.$confirm(this.$t('是否确认签收流程'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        this.allLoading = true
        claimTask(this.taskData.taskId).then(response => {
          if (response.code === 200) {
            this.taskData.assignee = response.data
            this.showRecord = false
            this.$nextTick(() => (this.showRecord = true))
          } else {
            this.msgError(response.msg)
          }
          this.allLoading = false
        })
      }).catch(() => {
      })
    },
    // 表单属性选择事件
    formFileSelectChange(fileValue) {
      // 自由流时使用的配置
      if (this.taskData.processDefKey === 'act_free_flow_approval') {
        if (fileValue === '同意') {
          this.nextApply = true
        } else {
          this.nextApply = false
        }
      }
      // 驳回 / 申请人补充材料 配置
      this.approvedConfig(fileValue)
    },
    // 驳回 / 申请人补充材料 配置
    approvedConfig(fileValue) {
      this.rejectedStopMessage = ''
      if (fileValue === '驳回') {
        // 校验任务是否可以驳回
        rejectedCheck(this.taskData.id).then(response => {
          this.rejectedStopMessage = response.data
          if (this.rejectedStopMessage === '') {
            this.taskData.completeType = 'rejected'
            // 不可以进行加签和转签操作
            this.canSign = false
            getHistoryNode(this.taskData.taskId).then(response => {
              this.historyNodeList = response.data
            })
          }
        })
      } else if (fileValue === '申请人补充材料') {
        this.getDefaultCompleteType()
        // 不可以进行加签和转签操作
        this.canSign = false
      } else if (fileValue === '修改意见') {
        this.updateComment()
        // 不可以进行加签和转签操作
        this.canSign = false
      } else {
        this.getDefaultCompleteType()
        // 可以进行加签和转签操作
        this.canSign = true
      }
    },
    // 选择需要修改意见的用户
    getUpdateCommentUserList() {
      getUpdateCommentUserList(this.taskData.updateCommentNode, this.taskData.actId).then(response => {
        this.updateCommentData.approveList = response.datas.approveList
        this.$forceUpdate()
      })
    },
    // 返回上一节点修改意见操作
    updateComment() {
      getHistoryNode(this.taskData.taskId).then(response => {
        this.taskData.completeType = 'updateComment'
        this.historyNodeList = response.data
      })
    },
    // 查看关联流程
    viewAssociatedProcess(actId) {
      this.processInfoFormOpen = true
      this.$nextTick(() => {
        var proData = {}
        proData.actId = actId
        this.$refs.processInfoForm.init(proData)
      })
    },
    findFastOpinions() {
      this.quickCommentsOpen = true
      this.$nextTick(() => {
        this.$refs.wfUsedOpinionList.getList()
      })
    },
    // 查询快捷意见列表
    listWfUsedOpinion() {
      listWfUsedOpinion({}).then(response => {
        this.usedOpinions = response.rows
      })
    },
    addValue(item, filed) {
        if (filed.value !== null && filed.value !== undefined && filed.value !== '') {
          this.$confirm(this.$t('是否将审批意见替换为快捷意见?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
          }).then(() => {
            filed.value = item.opinions
          }).then(() => {
            this.msgSuccess(this.$t('已替换'))
          })
        } else {
          filed.value = item.opinions
        }
    },
    // 意见暂存
    actTaskOpinionStaging() {
      actTaskOpinionStaging(this.taskData).then(response => {
        if (response.code === 200) {
          this.msgSuccess(this.$t('保存成功'))
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

.row{
  display: flex;
  column-gap: 20px;
  .col-right{
    width: 34%;
    min-width: 34%;
    max-width: 34%;
  }
  .col-left{
    flex: 1;
    width: calc(100% - 34% - 20px);
  }
}
.actTaskLeft{
  height: calc(100% - 35px);
  border: 1px solid #DCDFE6;
  border-top: 0;
}
.actTaskForm{
  .printForm {
    width:calc(100% - 30px);
  }
  /deep/.area-header{
    margin: 10px 0;
  }
  /deep/.approvalRecord {
    width:calc(100% - 30px);
    margin-bottom: 10px;
  }
}
.tabTask{
    border-left: 1px solid #DCDFE6;
    display: flex;
    span{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 35px;
      // line-height: 30px;
      background: #fff;
      border: 1px solid #DCDFE6;
      color: #606266;
      padding: 0 15px;
      cursor: pointer;
      text-align: center;
      border-left: 0;
      font-weight: bold;
    }
    .active{
      border-top: 1px solid #46a6ff;
      border-bottom: 0;
    }
    .last{
      flex: 1;
      border: 0;
      border-bottom: 1px solid #DCDFE6;
    }
}
.maxWid-400{
  max-width: 400px;
}
.accraditation{
  position: relative;
  height: calc(100% - 25px);
  .el-form{
    height: calc(100% - 50px);
    overflow: auto;
    margin-right: -18px;
  }
  .actFooter{
    position: absolute;
    right: 0;
    bottom: -30px;
  }
}
.edit-icon{
  cursor: pointer;
  color:#46a6ff;
  margin-left: 10px;
}
/deep/.el-loading-mask {
  z-index: 2200;
}
.tip-block{
  padding: 15px;
  background-color: #fafafa;
  border: 1px solid #eaeefb;
  margin-bottom: 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  column-gap: 5px;
  margin-right: 30px;
  color: #FF9000;
  i{
    color: #FF9000;
    font-weight: bold;
    font-size: 16px;
  }
}
.area-header-act{
  white-space: nowrap;
  overflow: hidden;
  max-width: 95%;
  display: inline-block;
  text-overflow: ellipsis;
}

@media (max-width: 1200px) {
  .actFooter {
    zoom: 0.7
  }
}
</style>
